<template>
    <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            @keyup.enter.native="handleFilter"
            clearable
            v-model="listQuery.account"
            style="width: 160px;margin-right:15px;margin-top:7px"
            class="filter-item"
            placeholder="请输入创建人的账号"
      ></el-input>
      <el-input
            @keyup.enter.native="handleFilter"
            clearable
            v-model="listQuery.jobNumber"
            style="width: 150px;margin-right:15px;margin-top:7px"
            class="filter-item"
            placeholder="请输入员工工号"
      ></el-input>

      <el-date-picker
        v-model="listQuery.startTime"
        value-format="timestamp"
        format="yyyy-MM-dd"
        placeholder="选择开始日期"
        style="width: 150px;margin-right:15px;" class="filter-item"
      >
      </el-date-picker>
      <el-date-picker
        v-model="listQuery.endTime"
        format="yyyy-MM-dd"
        value-format="timestamp"
        placeholder="选择结束日期"
          style="width: 150px;margin-right:15px;" class="filter-item"
      ></el-date-picker>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="员工姓名"  prop="userName"   align="center"/>
      <el-table-column  label="员工工号" prop='jobNumber' align="center" width="100px"/>
      <el-table-column  label="创建人" prop='landerName' align="center"/>
      <el-table-column  label="绩效记录" prop='performance' align="center" width="100px"/>
      <el-table-column  label="分值" prop='score' align="center" width="100px"/>
      <el-table-column  label="增减说明" prop='performanceDesc' align="center" width="100px"/>
      <el-table-column  label="创建时间"  prop="createTime" align="center"/> 
      <!-- 对员工数据进行编辑与删除操作 -->
      <el-table-column  label="操作"   align="center"  v-if="userInfo.roleId != 37">
        <template slot-scope="scope" >
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
 
  </div>
</template>

<script>
import { delPerformance, performancePage } from '@/api/performance.js'
export default {
    data() {
        return {
            total: 0,                           //数据的总数
            listQuery: {
                account: '',                     //创建人的账号
                endTime: '',                     //结束时间
                startTime: '',                   //开始时间
                jobNumber: ''                    //员工工号
            },
            tableInfo: [],
            loadingList: false,
            userInfo: this.$store.state.user.userInfo,
        }
    },
    methods: {
    // 搜索按钮绑定的函数，向服务器发送表单数据
    // 所有传输的表单字段都不是必须的，按需查询
    async handleFilter() {
      this.loadingList = true
      let query = Object.assign({},this.listQuery)
      query.startTime = query.startTime == null ? '' : query.startTime
      query.endTime = query.endTime == null ? '' : query.endTime
      // 用来判断查询的条件是否为空，当不为空时，则返回到首页，也就是第一页
      if(query.startTime == '' &&
         query.endTime == '' &&
         query.jobNumber == '' &&
         query.account == '' ) {
         console.log('搜索内容不为空')
      } else {
        query.page = 1
      }
      let {data} = await performancePage(query)
      this.tableInfo = data.records
      this.total = data.total
      this.loadingList = false
    },
    // 修改按钮绑定的函数，将整行的内容取好跳转到修改页面
    handleEdit(item) {
      this.$router.push({
        path: 'updateData_List',
        name: 'updateData_List',
        params: item
      })
    },
    // 删除用户按钮,使用elementui的messageBox弹框组件
    // 传入的数据是数据所在的行数以及该条目所有的信息
    handleDelete(index,row) {
      this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let res = await delPerformance({performanceId: row.performanceId})
          this.tableInfo.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
     // 获取角色列表下拉框数据
    async getRoleInfo() {
      let {data} = await getRoleList()
      this.roleList = data
    },
    // 获取部门下拉框数据
    async getDepartInfo() {
      let {data} = await getDepartList()
      this.departList = data
    }, 
    // table表单下方的页码组件改变每页显示的数据条数
     handleSizeChange(val) {
      this.listQuery.limit = val
      this.handleFilter()
    },
    // table表单下方的页码组件改变页面
     handleCurrentChange(val) {
      this.listQuery.page = val
      this.handleFilter()
    },
    transformDat(res) {
          const mapInfo = {
            index:'序号',
            userName: '员工姓名',
            jobNumber: '员工工号',
            landerName:'创建人',
            performance: '绩效记录',
            score: '分值',
            performanceDesc: '增减说明',
            createTime: '创建时间',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
    },
    // 导出excel
    async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          query.startTime = query.startTime == null ? '' : query.startTime
          query.endTime = query.endTime == null ? '' : query.endTime
          // 用来判断查询的条件是否为空，当不为空时，则返回到首页，也就是第一页
          if(!this.listQuery.jobNumber) { delete query.jobNumber }
          if(!this.listQuery.account) { delete query.account }
          let arr = await performancePage(query)
          const { header, data } = this.transformDat(this.setSort(arr.data.records))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '绩效查询删除excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
    },
    // 排序函数
    setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              userName: item.userName,
              jobNumber: item.jobNumber,
              landerName: item.landerName,
              performance: item.performance,
              score: item.score,
              performanceDesc: item.performanceDesc,
              createTime: item.createTime
            }
            arr1.push(obj)
          })
          return arr1
    },
  },
  // 进入页面获取table信息
  mounted() {
    this.handleFilter()
  }
}
</script>

<style>

</style>